<template>
    <el-container class="home-container">
        <el-header><!-- 头部区 -->
            <!-- 头部区 -->
            <!--左  -->
            <div class="h_left">
                <div class="l_icon"></div>
                <div class="l_font">图形化流程设计工具</div>
            </div>
            <!--右  -->
            <div class="h_right">
                <div class="msg"><span class="el-icon-bell"></span></div>
                <div class="userIcon"></div>
                <div class="userName">
                    <el-dropdown @command="handleCommand" trigger="click">
                        <span class="el-dropdown-link">
                            Admin<i class="el-icon-arrow-down el-icon--right"></i>
                        </span>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item command="a">个人中心</el-dropdown-item>
                            <el-dropdown-item command="b">退出登录</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </div>
            </div>

        </el-header>
        <!-- 页面主体区域 -->
        <el-container>
            <!-- 侧边栏 -->
            <el-aside width="388px">Aside</el-aside>
            <!-- 右侧内容主体 -->
            <el-main>Main</el-main>
        </el-container>
    </el-container>
</template>
 
<script>
export default {
    methods: {
        logout() {
            window.sessionStorage.clear();
            this.$router.push('/login');
        }
    }
};
</script>
 
<style lang="less" scoped>
.home-container {
    height: 100%;


    .el-header {
        background: #17244A;
        width: 100%;
        height: 80px;
        line-height: 80px;
        padding: 0 20px;
        box-sizing: border-box;
        display: flex;
        justify-content: space-between;
        align-items: center;

        div {
            //内嵌的div样式
            display: flex;
            align-items: center; //Logo和文字上下居中

            span {
                margin-left: 15px; //文字左侧设置间距，防止与Logo紧贴
            }
        }

        .h_left {
            width: 330px;
            height: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;

            .l_icon {
                width: 49px;
                height: 40px;
                background: url(../assets/headerIcon.png) no-repeat;
                background-size: 100% 100%;
            }

            .l_font {
                font-size: 30px;
                font-family: PingFang SC;
                font-weight: bold;
                color: #FFFFFF;
            }

        }

        .h_right {
            height: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;

            .msg {
                width: 44px;
                height: 44px;
                line-height: 50px;
                background: rgba(255, 255, 255, .1);
                border-radius: 10px;
                margin-right: 15px;
                text-align: center;

                span {
                    color: #FFFFFF;
                    font-size: 22px;
                }
            }

            .userIcon {
                width: 44px;
                height: 44px;
                border-radius: 50%;
                background: red;
                margin-right: 15px;
            }

            .userName {
                font-size: 16px;
                font-family: Source Han Sans CN;
                font-weight: 400;
                color: #FFFFFF;

                .el-dropdown {
                    color: #fff;
                    font-weight: bold;
                    font-size: 16px;
                }
            }
        }

    }

    .el-aside {
        background-color: #333744;
    }

    .el-main {
        background-color: #eaedf1;
    }
}
</style>
